<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>商品管理</li>
			    <li>商品列表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-default" @click="resetForm()">重置</button>
						<!-- <button type="button" class="btn btn-danger" @click="clearGoods()">清理过期商品</button> -->
					    <a href="{%:url('Goods/add')%}" class="btn btn-success">新增</a>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>商品图</th>
								<th>类别</th>
								<th>品牌</th>
								<th>尺码组</th>
								<th>添加者</th>
								<th>添加时间</th>
								<th>销售量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>
									<a :href="row.goods_pic" title='点击看大图' target="_BLANK" class="pre_view">
										<img :src="row.pic_tmb" height="38">
									</a>
								</td>
								<td>{{ row.cate_name }}</td>
								<td>{{ row.brand }}</td>
								<td>{{ row.size_set }}</td>
								<td>{{ row.acct_name }}</td>
								<td>{{ row.add_time }}</td>
								<td>{{ row.item_count }}</td>
								<td><a href="#" @click="edit(row.id)" v-if="row.can_edit"><i class="fa fa-pencil"> 修改</a></td>
							</tr>
							<tr v-if="rows.length===0">
								<td colspan="8" style="color:red">查询无记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	</div>	
	<!-- 商品编辑模板 -->
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					cate_name: '',
					brand_name: ''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			created: function(){
				this.getList();
			},
			methods:{
				// 清理过期商品
				clearGoods(){
					let t = this;
					$.post("{%:url('Goods/clearGoods')%}",{},function(rsp){
						console.log({rsp});
						if(rsp.code == 1){
							t.$message.success(rsp.msg);
							t.getList();
						}else{
							t.$message.error(rsp.msg);
						}
					},'json')
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Goods/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				},
				edit(id){
					location.href="{%:url('Goods/edit')%}?id=" + id;
				}	
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	
	</script>
</body>

</html>